<template>
  <div class="AppContainer">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |

      <span @click="changeModel" class="changeModel">{{ isDark ? "Light🌞" : "Dark🌛"}}</span>
    </nav>

    <router-view />
  </div>
</template>

<script setup>
import { ref } from "@vue/reactivity";
import { onMounted } from "@vue/runtime-core";
let isDark = ref(false);
function changeModel() {
  isDark.value = !isDark.value;
  if (isDark.value) {
    document.documentElement.setAttribute("color-mode", "dark");
  } else {
    document.documentElement.setAttribute("color-mode", "light");
  }
}

function readLocal(){

  // This code assumes a Light Mode default
if (
    /* This condition checks whether the user has set a site preference for dark mode OR a OS-level preference for Dark Mode AND no site preference */
    localStorage.getItem('color-mode') === 'dark' ||
    (window.matchMedia('(prefers-color-scheme: dark)').matches &&
     !localStorage.getItem('color-mode'))
) {
    // if true, set the site to Dark Mode
    document.documentElement.setAttribute('color-mode', 'dark')
    isDark.value  = true
 
}
}

onMounted(()=>{
  readLocal()
})


</script>


<style lang="less">
/* Define dark and light palettes with CSS variables */

/* Light Mode */
:root[color-mode="light"] {
  --surface1: #e6e6e6;
  --surface2: #f2f2f2;
  --surface3: #ffffff;
  --element1: #111111;
  --element2: #222222;
  --element3: #333333;
  --elementInverse: #eee;
  --primary: #01408e;
  --secondary: #3c5d5c;
  --tertiary: #fff7d6;
}

/* Dark Mode */
:root[color-mode="dark"] {
  --surface1: #262626;
  --surface2: #333333;
  --surface3: #404040;
  --element1: #eeeeee;
  --element2: #dddddd;
  --element3: #cccccc;
  --elementInverse: #111;
  --primary: #8fceff;
  --secondary: #72faca;
  --tertiary: #eee8a9;
}

*{
  margin: 0;
  padding: 0;
}

#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .AppContainer {
    width: 100%;
    height: 100vh;
    background-color: var(--surface1);
    transition: all .2s;
  }
}

  a {
    font-weight: bold;
    color: var(--primary);

    &.router-link-exact-active {
      color: var(--secondary);
    }
  }

nav {
  padding: 30px;


  .changeModel{
    border: 1px solid black;
    font-size: 15px;
    padding:5px 15px;
    border-radius: 10px;
    background-color: var(--surface3);
    color: var(--element3);
    cursor: pointer;
}
}
</style>
